<template>
  <div class="app-container">
    <div class="customContainer threeSearchHeader">
      <div class="order_title">
        <span>收货单概要</span>
      </div>
      <div class="order_info bor_bot_n is_fixed">
        <el-row>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货单号：</div>
              <div>{{info.send_order_no}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">采购单号：</div>
              <div>{{info.order_id}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货状态：</div>
              <div>{{info.status_name}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">下单类型：</div>
              <div>{{info.type_name}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">采购渠道：</div>
              <div>{{info.from_name}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">采购种类：</div>
              <div>{{info.species_num}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">采购数量：</div>
              <div>{{info.all_num}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">采购金额：</div>
              <div>{{info.all_money|keepTwoNum}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">实收种类：</div>
              <div>{{info.arrive_species_num}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">实收数量：</div>
              <div>{{info.arrive_num}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">实收金额：</div>
              <div>{{info.arrive_money|keepTwoNum}}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="order_title">发货方信息</div>
      <div class="order_info bor_bot_n pb_n">
        <el-row>
          <el-col :span="8">
            <div class="info_item l_h">
              <div class="tag">发货方：</div>
              <div>{{info.supplier_name}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item l_h">
              <div class="tag">联系人：</div>
              <div>{{info.supplier_nick}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">手机：</div>
              <div style="position:relative">{{info.supplier_phone}}<el-button v-show="info.from==1" class="more_btn" @click="moreDialog=true" type="text">更多联系人
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="order_title">收货方信息</div>
      <div class="rece_info">
        <el-row>
          <el-col :span="8">
            <div class="info_item store info_bot">
              <div class="tag">收货门店：</div>
              <div class="remark">{{info.store_name}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货仓：</div>
              <div>{{info.house_name}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货人：</div>
              <div>{{info.receive_name}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">收货人手机：</div>
              <div>{{info.receive_phone}}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info_item">
              <div class="tag">地区：</div>
              <div>{{info.prov_name}} / {{info.city_name}} / {{info.dist_name}}</div>
            </div>
          </el-col>
        </el-row>
        <div class="info_bot">
          <div class="tag">地址：</div>
          <div class="remark">
            <div>{{info.address}}</div>
          </div>
        </div>
      </div>
      <!-- 列表 -->
      <el-table style="margin:20px 0 50px 0" highlight-current-row :data="list" border size="small">
        <el-table-column align="center" label='序号' width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片" prop="creat_time" width="80">
          <template slot-scope="scope">
            <div v-viewer="options" class="images" :class="[scope.row.ratio<1?'h':'w']">
              <img :src="scope.row.thumb" :data-source="scope.row.img" class="image" :key="scope.row.thumb" :alt="scope.row.img.split('?image=').pop()">
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="名称" prop="gift_name">
        </el-table-column>
        <el-table-column align="center" label="礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="进货价(元)" prop="money_sell"></el-table-column>
        <el-table-column align="center" label="采购数量(个)" prop="order_num"></el-table-column>
        <el-table-column align="center" label="采购金额(元)" prop="total"></el-table-column>
        <el-table-column align="center" label="实收数量(个)" prop="arrive_num"></el-table-column>
        <el-table-column align="center" label="实收金额(元)" prop="arr_total"></el-table-column>
      </el-table>
    </div>
    <!-- 更多联系人弹窗 -->
    <el-dialog width="400px" title="更多联系人" :visible.sync="moreDialog">
      <el-table highlight-current-row :data="info.all_linkman" border size="small">
        <el-table-column align="center" label="联系人" prop="name"></el-table-column>
        <el-table-column align="center" label="手机" prop="phone"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { getList } from '@/api/warehouse/rlInfo';
export default {
  data() {
    return {
      isFixed: false,
      offsetTop: 0,
      moreDialog: false,
      formInline: {
        send_id: '33'
      },
      options: {
        //预览图配置
        toolbar: true,
        url: 'data-source'
      },
      list: [],
      info: {}
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (vm.$route.params.routerflag) {
        vm.formInline.send_id = vm.$route.params.id;
        vm.isFixed = false;
        vm.fetchData();
      }
    });
  },
  methods: {
    // 列表获取
    fetchData() {
      this.list = [];
      getList(this.formInline).then(res => {
        res.status_name = res.status == 1 ? '待确认' : res.status == 2 ? '待收货' : res.status == 3 ? '收货中' : res.status == 4 ? '收货完成' : '已关闭';
        res.from_name = res.from == 1 ? '供应商' : '中央仓';
        if (res.type == 1 || res.type == 2) {
          res.type_name = '门店下单';
        } else if (res.type == 3 || res.type == 4) {
          res.type_name = '总部统配';
        } else if (res.type == 7) {
          res.type_name = '总部下单';
        }
        res.all_money /= 100;
        res.arrive_money /= 100;
        res.gift_list.forEach(val => {
          val.ratio /= 100;
          val.money_sell = (val.money_sell / 100).toFixed(2);
          val.total = (val.money_sell * val.order_num).toFixed(2);
          val.arr_total = (val.money_sell * val.arrive_num).toFixed(2);
        });
        this.info = res;
        this.list = res.gift_list;
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.customContainer {
  overflow-y: auto;
  position: relative;
  .is_fixed {
    z-index: 999;
    border-bottom: 1px solid #dcdfe6;
    background: #fff;
    position: sticky;
    top: 0px;
    position: -webkit-sticky;
  }
}
.order_info,
.rece_info,
.action_info {
  background: #fff;
  padding: 20px 5px;
  border: 1px solid #dcdfe6;
  .info_item {
    display: inline-block;
    width: 400px;
    margin-bottom: 20px;
    div {
      display: inline-block;
      color: #333;
    }
    .tag {
      width: 100px;
      color: #838383;
      text-align: right;
      margin-right: 10px;
    }
    .store {
      position: relative;
      .name {
        position: relative;
        top: 0px;
        left: 0px;
      }
    }
  }
  .info_bot {
    color: #333;
    div.remark {
      display: inline-block;
      width: calc(100% - 150px);
      div {
        word-wrap: break-word;
      }
    }
    div.remark.big {
      min-height: 70px;
    }
    div {
      color: #333;
    }
    .tag {
      color: #838383;
      display: inline-block;
      width: 100px;
      text-align: right;
      vertical-align: top;
      margin-right: 10px;
    }
  }
  .more_btn {
    position: absolute;
    top: -11px;
    right: -90px;
  }
}
.rece_info,
.action_info {
  padding: 30px 5px;
}
.order_title {
  padding: 0px 20px;
  font-size: 18px;
  height: 48px;
  color: #97999d;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-bottom: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bor_bot_n {
  border-bottom: none;
}
.bor_top_n {
  border-top: none;
}
.pb_n {
  padding-bottom: 0px;
}
</style>
